<x-app-layout>
{{--    <x-slot name="header">--}}
{{--        <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">--}}
{{--            {{ __('Dashboard') }}--}}
{{--        </h2>--}}
{{--    </x-slot>--}}

    <div class="py-6">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white dark:bg-gray-800 overflow-hidden sm:rounded-lg">
                <div class="grid grid-cols-1 md:grid-cols-4 p-2 gap-x-4 bg-gray-100">
                    <div class="bg-white p-3 rounded-sm" id="sidebar-nav">
                        this is bg white
                    </div>

                    <div class="p-3 mb-4 leading-5 bg-white rounded-sm border-solid box-border border-zinc-300 text-zinc-600 col-span-3">
                        <button wire:click="$dispatch('openModal', { component: 'test-modal' })">Edit User</button>
                        @livewire('test-modal')
                    </div>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>
